手把手教你用typescript撸一个npm包

创建一个项目目录

mkdir project

创建package.json

npm init

配置tsconfig.json

1. npm -i typescript -g //全局安装typescript,可以使用tsc命令
2. tsc --init //创建默认的tsconfig.json文件

{
    "compilerOptions": {
      "target": "es5",    // 指定ECMAScript目标版本
      "module": "es2015", // 指定模块代码类型
      "lib": ["es2015", "es2017", "dom"], // 指定要包含在编译中的库文件
      "outDir": "./dist",  // 编译后生成的文件目录
      "strict": true,    // 启用所有严格的类型检查选项
      "esModuleInterop": true
    }
}

开始编码

1. 在项目的根目录创建你的源代码目录，比如创建一个src目录，之后你的代码就在该目录下编写
2. 在src下指定你的入口文件,比如index.ts,之后打包的时候根根据你的入口index.ts输出编译为index.js
3. 在package.json中指定程序的入口

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.js", // 这里指定程序的入口
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

编译

• 因为你的项目中可能会有css文件之类的非js文件，所以采用webpack的编译方式更加灵活
• 在项目的根目录下创建一个webpack.config.js

• 目标生成两个版本的包文件：

  （1）供类似于使用方直接import这种方式导入的,即UMD

  （2）类似于使用方在网页中直接通过你的script标签引入你的文件这种方式,即通过全局变量的方式引入

• 具体如下

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const UMD = {
  entry: './src/index.ts',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }, {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'demo', // 以库的形式导出入口文件
    libraryTarget: 'umd' // 以库的形式导出入口文件时，输出的类型,这里是通过umd的方式来暴露library,适用于使用方import的方式导入npm包
  },
  optimization: {
    minimize: true
  },
  plugins: [new CleanWebpackPlugin()]
};

const CLIENT = {
    entry: './src/index.ts',
    mode: 'production',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }, {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: 'demo.js',
      path: path.resolve(__dirname, 'browser'),
      library: 'demo', // 以库的形式导出入口文件
      libraryTarget: 'window'// 以库的形式导出入口文件时，输出的类型。这里你导出的方法变量会挂载到window.demo上，适用于使用方通过window对象访问
    },
    optimization: {
      minimize: true
    },
    plugins: [new CleanWebpackPlugin()]
};
module.exports = [UMD, CLIENT];

• 将编译命令webpack --progress --display-chunks -p添加到package.json中的build上,这样就能通过npm run build命令来快速编译了

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js", // 这里指定程序的入口
  "scripts": {
    "build": "webpack --progress --display-chunks -p",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

• 接下来你就会在dist目录下和browser目录下看到你打包编译输出的两个包

测试

一般我们使用一个npm包的过程都是通过npm i package-name从远程下载好, 之后import xxx from package-name导入交给其他项目来使用。但是如果将我们的包还没有测试好，直接发到远程未免显得有点笨拙。我们可以在本地直接引入你刚刚编写的npm包，无须发到远程

• npm link // 在你的项目的根目录npm link

  npm link将在全局的node_modules/<package>中创建一个符号链接，该文件link到执行npm link命令的包

• npm link package-name // 进入你要测试的项目，npm link 你项目的名字（package.json中的name），你就会发现你可以import你刚刚编写的npm包了

  npm link package-name 将创建从全局安装的package-name到当前文件夹的node_modules /的符号链接。

发包

• 创建.npmingnore文件,在发包之前排除一些没有必要发的文件

  touch .npmingnore

• 注册npm，就按照提示依次填写信息就好了

  npm adduser

• 发布

  npm publish

由于本人学识有限，有很多需要提升的地方，望大家多多指教。